<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>购物车</title>
    <link rel="icon" href="<%=basePath%>img/logo.jpg" type="image/x-icon" />
    <link rel="stylesheet" href="<%=basePath%>css/font-awesome.min.css" />
    <link rel="stylesheet" href="<%=basePath%>css/userhome.css" />
    <link rel="stylesheet" href="<%=basePath%>css/user.css" />

    <!-- bootstrap -->
    <link rel="stylesheet" href="<%=basePath%>css/bootstrap.min.css" />
    <script type="text/javascript" src="<%=basePath%>js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/bootstrap.min.js"></script>

    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript">
        /* 前往支付 */
        function  toPay(id) {
            window.location.href = '<%=basePath%>goods/buyId/'+id
        }

    </script>
</head>
<body>
<div class="pre-2" id="big_img">
    <img src="http://findfun.oss-cn-shanghai.aliyuncs.com/images/head_loading.gif" class="jcrop-preview jcrop_preview_s">
</div>
<div id="cover" style="min-height: 639px;">
    <div id="user_area">
        <div id="home_header">
            <a href="<%=basePath%>goods/homeGoods">
                <h1 class="logo"></h1>
            </a>
            <a href="<%=basePath%>goods/homeGoods">
                <img src="<%=basePath%>img/home_header.png"  style="margin-left: 20px;" >
            </a>
            <a href="<%=basePath%>user/home">
                <div class="home"></div>
            </a>
        </div>
        <!--

            描述：左侧个人中心栏
        -->
        <div id="user_nav">
            <div class="user_info">
                <div class="head_img">
                    <img src="<%=basePath%>img/photo.jpg">
                </div>
                <div class="big_headimg">
                    <img src="">
                </div>
                <span class="name">${cur_user.username}</span><hr>
                <!--   <span class="school">莆田学院</span> -->
                <a class="btn" style="width: 98%;background-color: rgb(79, 190, 246);color:rgba(255, 255, 255, 1);" href="<%=basePath%>user/myPurse">我的钱包：￥${myPurse.balance}</a>
                <input type="hidden" value="${myPurse.recharge}" id="recharge"/>
                <input type="hidden" value="${myPurse.withdrawals}" id="withdrawals"/>
                <span class="btn" data-toggle="modal" data-target="#myModal" style="width: 98%;background-color: rgb(79, 190, 246); color:rgba(255, 255, 255, 1);margin-top:0.5cm;">我的信用积分：${cur_user.power}</span>

            </div>
            <div class="home_nav">
                <ul>
                    <a href="<%=basePath%>orders/myOrders">
                        <li class="notice">
                            <div></div>
                            <span>订单中心</span>
                            <strong></strong>
                        </li>
                    </a>
                    <a href="<%=basePath%>user/allFocus">
                        <li class="fri">
                            <div></div>
                            <span>关注列表</span>
                            <strong></strong>
                        </li>
                    </a>
                    <a href="<%=basePath%>goods/publishGoods">
                        <li class="store">
                            <div></div>
                            <span>发布物品</span>
                            <strong></strong>
                        </li>
                    </a>
                    <a href="<%=basePath%>user/allGoods">
                        <li class="second">
                            <div></div>
                            <span>我的闲置</span>
                            <strong></strong>
                        </li>
                    </a>
                    <a href="<%=basePath%>user/basic">
                        <li class="set">
                            <div></div>
                            <span>个人设置</span>
                            <strong></strong>
                        </li>
                    </a>
                </ul>
            </div>
        </div>
        <!--

        描述：右侧内容区域
    -->
        <div id="user_content">

            <div class="share">

                <!--

                描述：订单展示
            -->
                <h1 style="text-align: center">我的购物车</h1>
                <hr />
                <div class="share_content">
                    <c:if test="${empty cart}">
                        <div class="no_share">
                            <span>没有任何内容，去逛逛其它的吧！</span>
                        </div>
                    </c:if>
                    <c:if test="${!empty cart }">
                        <div class="story">

                            <div class="container">
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs" role="tablist" style="width: 46%">
                                    <!-- <li class="nav-item"><a class="nav-link active"
                                        data-toggle="tab" href="#home">全部订单</a></li> -->
                                    <li class="nav-item"><a class="nav-link active" data-toggle="tab"
                                                            href="#orders_my" >我的购物车</a></li>
                                </ul>

                                <!-- Tab panes -->
                                <div class="tab-content" style="width: 46%">
                                    <div id="orders_my" class="container tab-pane active"
                                         style="width: 100%">
                                        <br>
                                        <form class="form-horizontal" role="form">
                                            <div class="table-responsive">
                                                <table class="table">
                                                    <thead>
                                                    <tr>
                                                    </tr>
                                                    <tr>
                                                        <th >订单编号</th>
                                                        <th>名称</th>
                                                        <th>价格</th>
                                                        <th>数量</th>
                                                        <th>小计</th>
                                                        <th>操作</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <c:forEach var="items" items="${cart}">
                                                        <tr>
                                                            <td>${items.id}</td>
                                                            <td>${items.goodsName}</td>
                                                            <td>${items.goodsPrice}</td>
                                                            <td>${items.num}</td>
                                                            <td>${items.total}</td>
                                                            <td>
                                                                <button type="button" class="btn btn-primary btn-sm"
                                                                        onclick="doSettlement(${items.id})">结算</button>
                                                                <button type="button" class="btn btn-info btn-sm"
                                                                        onclick="doDelete(${items.id})">删除</button>
                                                                    <%--<button class="btn btn-danger btn-sm" type="button"
                                                                            id="deleteOrdersButton">删除</button>--%>
                                                            </td>
                                                        </tr>
                                                    </c:forEach>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </form>
                                    </div>
                    </c:if>
                </div>
            </div>
            <!--

            描述：最右侧，可能认识的人
        -->
            <div class="recommend">
                <div class="title">
                    <span class="text">可能认识的人</span> <span class="change">换一组</span> <span
                        class="underline"></span>
                </div>
                <ul>
                    <li><a href="" class="head_img"> <img
                            src="<%=basePath%>img/photo1.jpg">
                    </a> <span>Brudce</span>
                        <div class="fa fa-plus-square"></div></li>
                    <li><a href="" class="head_img"> <img
                            src="<%=basePath%>img/photo2.jpg">
                    </a> <span>Graham</span>
                        <div class="fa fa-plus-square"></div></li>
                    <li><a href="" class="head_img"> <img
                            src="<%=basePath%>img/photo3.jpg">
                    </a> <span>hly</span>
                        <div class="fa fa-plus-square"></div></li>
                    <li><a href="" class="head_img"> <img
                            src="<%=basePath%>img/photo4.jpg">
                    </a> <span>Danger-XFH</span>
                        <div class="fa fa-plus-square"></div></li>
                    <li><a href="" class="head_img"> <img
                            src="<%=basePath%>img/photo5.jpg">
                    </a> <span>Keithw</span>
                        <div class="fa fa-plus-square"></div></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script>

    /!* 删除 *!/
    function doDelete(id){
        $.ajax({
            url:'<%=basePath%>user/deleteCart/' + id,
            type:'GET',
            // data:{id:id},
            dataType:'json',
            success:function(json){
                if(json) {
                    location.reload();
                }
            },
            error:function(){
                alert('请求超时或系统出错!');
                $('#viewModal').modal('hide');
            }
        });
    }

    /!* 结算 *!/
    function doSettlement(id){
        location.href = '<%=basePath%>user/doSettlement/' + id;
    }
/*    var data = [1,2,6,7,8,9];
    //检测元素是否在数组中
    // console.log(data.indexOf(1));
    new Vue({
        el:'#app',
        data:{
            //购物车数据
            goods:[
                {id:1,name:'联想 K5 Note 4GB+64GB 6英寸全面屏双摄手机 全网通 移动4G+ 双卡双待 极地黑',price:999,num:1},
                {id:2,name:'一加手机6 8GB+128GB 亮瓷黑 全面屏双摄游戏手机 全网通4G 双卡双待 骁龙845',price:3599,num:1},
                {id:3,name:'小米MIX2 全面屏游戏手机 6GB+64GB 黑色 全网通4G手机 双卡双待 5.99"大屏，',price:2599,num:1},
                {id:4,name:'OPPO R15 全面屏双摄拍照手机 4G+128G 幻色粉 全网通 移动联通电信',price:2699,num:1},
                {id:5,name:'Apple MacBook Air 13.3英寸笔记本电脑 银色(2017款Core i5 处理器/8GB内',price:6588,num:1},
                {id:6,name:'Apple MacBook Pro 15.4英寸笔记本电脑 银色(Core i7 处理器/16GB内存/256GB ',price:12277,num:1},
                {id:7,name:'Apple MacBook Pro 15.4英寸笔记本电脑 银色（2017款Multi-Touch Bar/Core ',price:17588,num:3},
                {id:8,name:'Apple iPhone X (A1903) 64GB 深空灰色 移动联通4G手机 【支持移动联通4G】',price:6999,num:1},
                {id:9,name:'Apple 苹果 iPhone X手机 银色 全网通64G 【6.5白条全场三期免息】下单送透明壳',price:7498,num:1},
                {id:10,name:'Apple 苹果X iPhoneX 全面屏手机 银色 全网通 256G 【京仓配送 时效快捷 】入仓',price:8738,num:1},
            ],
            //控制全选
            allChecked:false,
            //商品数据选中
            allSelectData : [],
        },
        mounted(){
            //控制加载完页面全部选中
            // this.goods.forEach((v,k)=>{
            //     this.allSelectData.push(v.id);
            // })
        },
        methods:{
            //购物车数量增加
            plus(k){
                this.goods[k].num++;
            },
            //购物车数量减少
            reduce(k){
                this.goods[k].num--;
                if(this.goods[k].num==0){
                    this.goods.splice(k,1);
                }
            },
            //购物车删除
            del(k){
                this.goods.splice(k,1);
            },
            //单击全选按钮
            selecAll(){
                //console.log(event.currentTarget.checked);
                if(!event.currentTarget.checked){
                    //取消全选
                    this.allSelectData = [];
                }else{
                    //全选
                    this.goods.forEach((v,k)=>{
                        this.allSelectData.push(v.id);
                })
                }
            },
            select(id){
                //知道当前点击商品对应的商品编号是否在allSelectData数组中
                var res = this.allSelectData.indexOf(id);
                res == -1 ? this.allSelectData.push(id) : this.allSelectData.splice(res,1);
                this.allChecked = this.goods.length == this.allSelectData.length;
            }
        },
        computed:{
            totalPrice(){
                var total=0;
                this.goods.forEach((v,k)=>{
                    var res = this.allSelectData.indexOf(v.id);
                //计算总价只计算在allSelectData商品
                if(res != -1){
                    total += v.num * v.price;
                }
            })
                return total;
            }
        }
    })*/
</script>
</body>
</html>